<template>
  <div class="w-[60px] h-[calc(100vh-96px)] bg-[#1B1B1B]">
    <div
      v-for="route of allRoutes"
      :key="route.path"
      :class="{ checked: checked(route) }"
      class="cursor-pointer w-[60px] h-[60px] flex justify-center items-center"
      @click="router.push(route.path)"
    >
      <img :src="(route.meta as any)!.normal" class="w-[25px] h-[25px] object-contain" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { allRoutes } from '@/router/main';
import { RouteRecordRaw } from 'vue-router';
const route = useRoute();
const router =useRouter()
const checked = (r: RouteRecordRaw) => {
  return route.fullPath.startsWith(r.path);
};
onBeforeMount(() => {
  // console.log(allRoutes);
});
</script>
<style lang="less" scoped>
.checked {
  background-color: #ff9f00;
}
</style>
